<template>
	<div class="home">
		<div class="home-header">
			<p>商品首页</p>
			<div class="home-search"> 
				<router-link to="/Search">
					<span>搜索</span>
				</router-link>
			</div>
		</div>
		<div class="home-center">
			<div class="block">
				<el-carousel height="200px">
					<el-carousel-item v-for="(item,index) in arr" :key='index'>
						<img class="imgs" :src="item.image_src"/>
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
		<div class="home-main">
			<ul>
				<li v-for="(item,index) in navarr" :key="index" @click="toPath()">
					<img :src="item.image_src"/>
				</li>
			</ul>
		</div>
		<div class="home-wares">
			<ul>
				<li v-for="(item,index) in waresarr" :key='index'>
					<div class="home-wares-top">
						<img :src="item.floor_title.image_src" />
					</div>
					<ul class="home-wares-bottom">
						<li v-for="(item1,index) in item.product_list" :key='index'>
							<img :src="item1.image_src"/>
						</li>
					</ul>
				</li>
			</ul>
		</div>
  </div>
</template>

<script>
export default {
	data() {
		return{
			arr:[],
			navarr:[],
			waresarr:[]
		}
	},
	mounted(){
		this.getReq(),
		this.getnav(),
		this.getwares()
	},
	methods:{
		getReq:function(){
			this.axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata').then(
				res=>{
					this.arr=res.data.message
				}
			)
		},
		getnav:function(){
			this.axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/catitems').then(
				res=>{
					this.navarr=res.data.message
				}
			)
		},
		getwares:function(){
			this.axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/floordata').then(
				res=>{
					this.waresarr=res.data.message
				}
			)
		},
		//点击跳转
		toPath(){
			this.$router.push('/Category')
		}
	},
}
</script>

<style scoped>
	.home-header{
		text-align: center;
		background-color: #FF0000;
		line-height: 40px;
		font-size: 25px;
		background-color: red;
		width: 100%;
		font-size: 20px;
		color: rgb(172, 165, 165);
		font-weight: 600;
		padding-bottom: 10px;
	}
	.home-search{
		background-color: white;
		width: 96%;
		margin: 0 auto;
		border-radius: 5px;
		color: black;
		font-size: 14px;
	}
	.home-search>span{
		padding: 10px 100px
	}
	.home-main{
		width: 100%;
		height: 120px;
	}
	.home-main>ul{
		width: 100%;
	}
	.home-main>ul>li{
		width: 25%;
		text-align: center;
		padding: 20px 0;
		float: left;
		list-style: none;
	}
	.home-main img{
		width: 75px;
	}
	.home-wares{
		padding-bottom: 300px;
	}
	.home-wares-top{
		padding: 5px 0;
	}
	.home-wares-top img{
		width: 100%;
	}
	.home-wares-bottom{
		width: 100%;
	}
	.home-wares-bottom li{
		float: left;
		list-style: none;
		width: 30%;
		padding: 5px;
	}
	.home-wares-bottom li img{
		width: 100%;
		height: 100px;
	}
	.home-wares-bottom :first-child img{
		height: 215px;
	}
	.imgs{
		height: 200px;
		width: 100%;
	}
</style>